<template>
    <el-descriptions class="margin-top" title="个人信息" :column="1" :size="size" border>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <user />
                    </el-icon>
                    昵称
                </div>
            </template>
            {{ mine?.username }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <iphone />
                    </el-icon>
                    电话号码
                </div>
            </template>
            {{ mine?.phoneNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <location />
                    </el-icon>
                    省份
                </div>
            </template>
            {{ province }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <message />
                    </el-icon>
                    邮箱
                </div>
            </template>
            {{ mine?.email }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    我的积分
                </div>
            </template>
            {{ mine?.integral }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <clock />
                    </el-icon>
                    账号注册时间
                </div>
            </template>
            {{ createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <clock />
                    </el-icon>
                    最近登陆时间
                </div>
            </template>
            {{ latestTime }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    登陆IP
                </div>
            </template>
            {{ ip }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <edit-pen />
                    </el-icon>
                    个人介绍
                </div>
            </template>
            {{ mine?.description }}
        </el-descriptions-item>
    </el-descriptions>
    <el-row style="align-content: center;width: 100%;" justify="center">
        <el-col :span="12">
            <el-button style="background-color: red;color: white; width: 60%;margin-top: 10%;"
                @click="logOut">退出账号</el-button>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
    Iphone,
    Location,
    Clock,
    EditPen,
    Aim,
    User,
    Message
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import { getIp, getProvince, queryUser } from '../assets/net/NetUtils';
import { agcAuth } from '../assets/agc/auth';
import { userInfoStore } from '../assets/userStore/userStore';
import router from '../router';
import { UserModel } from '../assets/model/User';

const userStore = userInfoStore()
const size = ref<ComponentSize>('large')
const ip = ref<string>();
const province = ref<string>();
const mine = ref<UserModel>();
const createTime = ref();
const latestTime = ref()

onMounted(() => {
    getIp().then((value) => {
        ip.value = value;
    })
    getProvince().then((value) => {
        province.value = value;
    })
    queryUser(userStore.phoneNumber)
        .then((value) => {
            mine.value = value;
            console.log(value);
        })
    agcAuth.getCurrectUser()
        .then((value) => {
            value?.getUserExtra().then((value) => {
                createTime.value = new Date(Number(value?.getCreateTime())).toLocaleString()
                latestTime.value = new Date(Number(value?.getLastSignInTime())).toLocaleString()
            })
        })
    queryUser(userStore.phoneNumber)
        .then((value) => {
            mine.value = value;
        })
})
const logOut = () => {
    agcAuth.logOut();
    router.replace('/');
}
</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>